<template>
  <div class="container">
    <div class="text-align-c income-details-box">
      <div class="flex flex-between pad-l-15 pad-r-15 height-44">
        <div class="btn-bar flex">
          <button :class="{'button--active': dayTotal}" @click="dateChange" :style="{background:dayTotal?getAppInfo.style.color2:'',borderColor:getAppInfo.style.color2}">日统计</button>
          <button class="mar-l-10" :class="{'button--active': !dayTotal}" @click="dateChange" :style="{background:!dayTotal?getAppInfo.style.color2:'',borderColor:getAppInfo.style.color2}">月统计</button>
        </div>
        <div class="date-select-bar flex flex-between" @click="showDateSelect = true">
          <span>{{ showDate }}</span>
          <img v-if="fileSpace" class="width-15 height-8 mar-l-5" :src="fileSpace + '/images/cancellation-arrow-down.png'" alt="">
        </div>
      </div>
    </div>
    <div class="total pad-t-16" :class="'income-' + entityData.selfGoodsAuthority">
      <div class="total-title font-15">累计收入金额</div>
      <div class="income font-w pad-t-16">￥{{memberStat.monthAmount}}</div>
      <div v-if="entityData.selfGoodsAuthority" class="flex total-details">
        <div>
          <div class="font-13 font-color-9">自营订单(笔)</div>
          <div class="font-19 pad-t-12">{{memberStat.ownShopNum ? memberStat.ownShopNum : 0}}</div>
        </div>
        <div>
          <div class="font-13 font-color-9">自营商品销售</div>
          <div class="font-19 pad-t-12">￥{{memberStat.ownShopAmount}}</div>
        </div>
      </div>
      <div class="flex total-row mar-t-10">
        <div>
          <div class="font-13 font-color-9">{{getAppInfo.projectOrderAlias || '分销订单'}}(笔)</div>
          <div class="font-19 pad-t-12">{{dustributionOrder}}</div>
        </div>
        <div>
          <div class="font-13 font-color-9">{{getAppInfo.projectGoodsAlias || '分销商品'}}返佣</div>
          <div class="font-19 pad-t-12">￥{{dustributionIncome}}</div>
        </div>
      </div>
    </div>
    <div class="pad-l-15 pad-r-15 order-details-box mar-t-8">
      <div class="font-color-8 date-row">
        <div>
          <span>{{ showDate }}</span>
          <span>-交易订单</span>
        </div>
        <div class="flex v-align-c" @click="typeClick">
          <span>{{ incomeExpenseTypeName }}</span>
          <img :src="fileSpace + '/images/fit-triangle-down.png'" v-if="fileSpace" class="width-9 height-7.5 mar-l-7" alt="">
        </div>
      </div>
      <div class="flex flex-between height-63" v-for="(item,index) in listData" :key="index">
        <div class="flex flex-between">
          <img v-if="item.memberAvatarUrl" class="width-45 height-45 img-headshop" :src="item.memberAvatarUrl" alt="">
          <div class="mar-l-8">
            <div class="font-15">{{item.nickname}}</div>
            <div class="font-color-8 font-12">{{item.createTime}}</div>
          </div>
        </div>
        <div class="text-align-r">
          <div class="font-red font-15"><span v-if="item.amount > 0">+</span>{{item.amount}}元</div>
          <div class="font-10">{{dict[item.incomeExpenseType]}}</div>
        </div>
      </div>
      <div v-if="listData.length===0 && isInitDone" class="align-c mar-t-30 pad-30">
        <img v-if="fileSpace" mode="widthFix" class="width-153 height-75 mar-t-30" :src="fileSpace + '/images/2-0-kong.png'" />
        <div class="pad-t-20 font-14 font-gray">空空如也</div>
      </div>
    </div>
    <!-- 类型选择器 -->
    <van-popup :show="typeShow" position="bottom" @close="onClosePopup('typeShow')">
      <van-picker :columns="selectColumns" v-model="incomeExpenseType" show-toolbar @confirm="typeConfirm" @cancel="typeShow = !typeShow" />
    </van-popup>
    <van-popup :show="showDateSelect" @close="onClosePopup('showDateSelect')" position="bottom">
      <van-datetime-picker :type="dayTotal ? 'date' : 'year-month'" :value="currentDate" @confirm='confirmClick' @cancel='cancelClik' />
    </van-popup>
  </div>
</template>

<script>
import { pageIncomeExpense, statMemberCommission, getEntityByMemberId } from '@/api/personal'
export default {
  data() {
    return {
      dayTotal: true,
      resData: {},
      listData: [],
      pullLoad: {
        loading: false,
        finished: false
      },
      typeShow: false,
      params: {
        memberId: '',
        month: '',
        currentPage: 1,
        size: 10,
        type: []
      },
      totalparams: {
        month: '',
        memberId: ''
      },
      isInitDone: false,
      showDateSelect: false,
      currentDate: null,
      dict: {},
      memberStat: {},
      incomeExpenseType: '',
      incomeExpenseTypeName: '', // 展示的类型--文本
      selectColumns: [],
      entityData: {},
      getAppInfo: {}
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
    this.getAppInfo = this.$pt.getStorageSync('appInfo')
  },
  onShow() {
    this.params.memberId = this.getCustomerId
    this.currentDate = new Date().getTime()
    this.showDate = this.$utils.DatePart(this.currentDate, 'yyyy-MM-dd')
    this.getEntityByMemberId()
  },
  onReachBottom() {
    if (!this.pullLoad.finished) {
      this.pageIncomeExpense()
    }
  },
  computed: {
    paramsDate: function() {
      if (this.dayTotal) {
        return this.$utils.formatTimeDate(this.currentDate, 'yyyy-MM-dd')
      } else {
        return this.$utils.formatTimeDate(this.currentDate, 'yyyy-MM')
      }
    },
    showDate: function() {
      if (this.dayTotal) {
        return this.$utils.DatePart(this.currentDate, 'yyyy-MM-dd')
      } else {
        return this.$utils.DatePart(this.currentDate, 'yyyy-MM')
      }
    },
    dustributionOrder: function() {
      return this.memberStat.shareShopNum || 0 + this.memberStat.heOwnShopNum || 0 + this.memberStat.heShareShopNum || 0
    },
    dustributionIncome: function() {
      return (this.memberStat.shareShopAmount * 1 + this.memberStat.heOwnShopAmount * 1 + this.memberStat.heShareShopAmount * 1).toFixed(2)
    }
  },
  methods: {
    getEntityByMemberId() {
      // 用来判断申请店播展示
      getEntityByMemberId({
        memberId: this.getCustomerId
      }).then(response => {
        if (response.isError) return
        this.entityData = response.data
        // this.entityData.selfGoodsAuthority = 1
        this.params.type = ''
        if (this.entityData.selfGoodsAuthority) {
          this.incomeExpenseTypeName = '全部类型'
          this.selectColumns = [
            { text: '全部类型', value: '' },
            { text: '自营商品销售', value: '12' },
            { text: `${this.getAppInfo.projectGoodsAlias || '分销商品'}返佣`, value: '15' }
          ]
        } else {
          this.params.type = '15'
          this.incomeExpenseTypeName = '分销商品返佣'
          this.selectColumns = [
            { text: '分销商品返佣', value: '15' }
          ]
        }
        this.pageInit()
      })
    },
    pageInit() {
      // 页面数据加载
      this.statMemberCommission()
      this.pageIncomeExpense()
    },
    pageIncomeExpense() {
      // 分页数据
      this.isInitDone = false
      this.params.month = this.paramsDate
      pageIncomeExpense(this.params).then(response => {
        if (response.isError) return
        this.resData = response.data
        this.dict = this.resData.dict.incomeExpenseType
        this.dict[15] = this.dict[15].replace('分销商品', this.getAppInfo.projectGoodsAlias)
        this.dict[17] = this.dict[17].replace('分销商品', this.getAppInfo.projectGoodsAlias)
        console.log(this.dict)
        response.data.page.records.forEach(item => {
          this.listData.push(item)
        })
        if (this.listData.length === 0) {
          this.isInitDone = true
        }
        this.params.currentPage++
        if (this.listData.length === 0 || this.listData.length >= response.data.page.total) {
          this.pullLoad.finished = true
        }
        console.log('listData', this.listData.length, 'total:', response.data.page.total)
        console.log('finished', this.pullLoad.finished)
      })
    },
    statMemberCommission() {
      // 统计接口
      this.totalparams.memberId = this.getCustomerId
      this.totalparams.month = this.paramsDate
      statMemberCommission(this.totalparams).then(response => {
        if (response.isError) return
        this.memberStat = response.data
      })
    },
    dateChange() {
      this.dayTotal = !this.dayTotal
      this.params.currentPage = 1
      this.listData = []
      this.pullLoad.finished = false
      this.pageInit()
    },
    confirmClick(event) {
      // 时间选择器确认选择事件
      this.params.currentPage = 1
      this.listData = []
      this.pullLoad.finished = false
      this.currentDate = event.mp.detail
      this.showDateSelect = false // 关闭弹出框
      this.pageInit()
    },
    cancelClik() {
      this.showDateSelect = false
    },
    onClosePopup(value) {
      this[value] = false
    },
    typeClick() {
      this.typeShow = true
    },
    // 类型选择确定事件
    typeConfirm(item, index) {
      // value:当前值  index:当前索引
      // 选中事件处理
      let value = item.mp.detail.value
      if (value !== undefined) {
        this.incomeExpenseType = value.value
        this.params.type = value.value
        this.incomeExpenseTypeName = value.text
      } else {
        this.incomeExpenseTypeName = '全部类型'
        this.params.type = []
      }
      this.typeShow = false // 关闭选项框
      this.params.currentPage = 1
      this.pullLoad.finished = false
      this.listData = []
      this.pageIncomeExpense()
    }
  }
}
</script>

<style lang="less" scoped>
.income-details-box {
  // height: 315px;
  background: white;
  .total-title {
    margin-top: 16px;
  }
}
.total {
  height: 230px;
  background: #fafafa;
  text-align: center;
  line-height: 1;
  &.income-0 {
    height: 170px;
  }
  .income {
    font-size: 30px;
    margin-bottom: 30px;
  }
  .total-details {
    justify-content: space-evenly;
    align-items: center;
  }
  .total-row {
    justify-content: space-evenly;
    align-items: center;
  }
}
.order-details-box {
  background: white;
}
.date-row {
  height: 36px;
  line-height: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.img-headshop {
  border-radius: 50%;
}
.btn-bar {
  button {
    background: white;
    border: 1px solid #ffe200;
    border-radius: 25px;
    font-size: 14px;
    line-height: 27px;
    &::after {
      border: unset;
    }
  }
  .button--active {
    background: #ffe200;
    border: unset;
    color: white;
  }
}
</style>
